<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta charset="UTF-8">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon"/>
    <title>庄园</title>
    <link href="../plugin/LineProgressbar/css/jquery.lineProgressbar.css" rel="stylesheet"/>
    <link href="../css/home.css" rel="stylesheet"/>

</head>
<body>
<div id="home-main">
    <audio src="../images/123.mp3" loop autoplay id="audio"></audio>
    <div class="home-content">
        <div class="mine-info">
            <div class="mineInfo-content">
                <div class="basic-info">
                    <div class="avatar-box">
                        <img class="user-avatar" src=""/>
                    </div>
                    <div class="otherBasic-info">
                        <p id="username" class="username">若梦</p>
                        <div class="experience">
                            <strong class="out-line">
                                <strong></strong>
                                <span class="experience"></span>
                            </strong>
                        </div>
                    </div>
                </div>
                <div class="coin-info">
                    <div class="coin-num">
                        <img src="../images/icon-gold.png"/><span class="gold-balance">12334124</span>
                    </div>
                    <div class="btn-box">
                        <button class="btn btn-small btn-green" id="mine-recharge">充值</button>
                    </div>
                </div>
                <!--<div class="grapeCoin-info">-->
                <!--<div class="coin-num">-->
                <!--<img src="../images/icon-grape.png"/><span class="grape-num">12334124</span>-->
                <!--</div>-->
                <!--<div class="btn-box">-->
                <!--&lt;!&ndash;<button class="btn btn-small btn-green" id="mine-withdraw">提现</button>&ndash;&gt;-->
                <!--</div>-->
                <!--</div>-->
            </div>
        </div>
        <div class="friend-info">
            <div class="friendInfo-content">
                <div class="basic-info">
                    <div class="avatar-box">
                        <img class="user-avatar" src=""/>
                    </div>
                    <div class="otherBasic-info">
                        <p class="username"></p>
                        <div class="experience">
                            <strong class="out-line">
                                <strong></strong>
                                <span class="experience"></span>
                            </strong>
                        </div>
                    </div>
                </div>
                <div class="coin-info">
                    <div class="coin-num">
                        <img src="../images/icon-gold.png"/><span class="gold-balance">12334124</span>
                    </div>
                    <div class="btn-box">

                    </div>
                </div>
                <!--<div class="grapeCoin-info">-->
                <!--<div class="coin-num">-->
                <!--<img src="../images/icon-grape.png"/><span class="grape-num">12334124</span>-->
                <!--</div>-->
                <!--<div class="btn-box">-->

                <!--</div>-->
                <!--</div>-->
            </div>

        </div>
        <div class="field-container" id="field-container">
            <div class="field-content">
                <div class="first field-item">
                    <div class="field-content">
                        <div class="field-img">
                            <img class="fieldItem-status" src="种子"/>
                            <img class="fieldItem-isStore" src="手"/>
                            <div class="steal-num">偷取数量</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dog-dialog" id="dog-dialog">
            <img src="../images/dog.gif"/>
        </div>
        <div class="field-right-container" id="field-right-container">
            <div class="field-content">
                <div class="first field-item">
                    <div class="field-content">
                        <div class="field-img">
                            <img class="fieldItem-status" src="种子"/>
                            <img class="fieldItem-isStore" src="手"/>
                            <div class="steal-num">偷取数量</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--<div class="leftCenter-box">-->
        <!--<div class="steal-box" id="steal-gold"></div>-->
        <!--</div>-->
        <div class="rightCenter-box">
            <div class="rightFriend-box"></div>
        </div>
        <div class="myFriends-box">
            <!--todo 接入外部好友模块-->
        </div>
        <div class="bottom-toolbar" id="bottom-toolbar">
            <ul>
                <li class="mall"></li>
                <li class="myProps"></li>
                <li class="shovel"></li>
                <li class="charge"></li>
                <li class="userCenter"></li>
            </ul>
        </div>
        <div class="back-home" id="back-home"></div>
        <div class="dogHome-box"></div>
        <div class="propsMall-dialog dialog_content" id="propsMall-dialog">
            <div class="propsMall-content">
                <div class="close-propsMall close-dialog"></div>
                <div class="notice"></div>
                <ul class="goods-list"></ul>
            </div>
        </div>
        <div class="myPropsMall-dialog dialog_content" id="myPropsMall-dialog">
            <div class="myPropsMall-dialog-content">
                <div class="close-myPropsMall-dialog close-dialog"></div>
                <ul class="goods-list"></ul>
            </div>
        </div>
        <div class="propsMall-buyDialog dialog_content" id="propsMall-buyDialog">
            <div class="propsMallBuy-content">
                <div class="close-dialog close-propsMallBuy"></div>
                <div class="buyNum-box">
                    <div class="buy-minus"><img src="../images/buyGoods-minusDis.png"/></div>
                    <div class="buy-num"><span>1</span></div>
                    <div class="buy-add"><img src="../images/buyGoods-add.png"/></div>
                </div>
                <div class="buy-btn">
                    <div class="buyBtn-content">
                        <h4>购买</h4>
                        <p><img src="../images/icon-gold.png"/><span class="buyGoods-price">1000</span></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="myDetailInfo-box dialog_content" id="myDetailInfo-box">
            <div class="close-myDetailInfo close-dialog"></div>
            <div class="myDetailInfo-content">
                <ul>
                    <li>
                        <div class="item-tip">我的资料</div>
                        <div class="item-info">
                            <p>用户名：<span class="myDetail-username"></span></p>
                            <p>手机号：<span class="myDetail-mobile"></span></p>
                            <p>性别：<span class="myDetail-sex"></span></p>
                            <p>地址：<span class="myDetail-address">定位中...</span></p>
                        </div>
                    </li>
                    <!--<li>-->
                    <!--<div class="item-tip">我的地址</div>-->
                    <!--<div class="item-info">-->
                    <!--<p>GPS定位<img src=""/></p>-->
                    <!--<p>地址：<span>中国江苏</span></p>-->
                    <!--</div>-->
                    <!--</li>-->
                    <li>
                        <div class="item-tip">系统设置</div>
                        <div class="item-info">
                            <!--<p>更改手机号</p>-->
                            <p><a href="changePassword.html">更改密码</a></p>
                            <p><a id="login-out" href="javascript:void(0)">切换账号</a></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="myFriendsList-box dialog_content" id="myFriendsList-box">
            <div class="myFriendsList-content">
                <div class="close-myDetailInfo close-dialog"></div>
                <div class="left-content">
                    <div class="friend-title">
                        <h4>已添加好友</h4>
                    </div>
                    <div class="friend-list"></div>
                    <div class="friend-bottom">
                        <div class="addFriend-box"><img src="../images/icon-addFriend.png"/></div>
                        <div class="delFriend-box"><img src="../images/icon-delFriend.png"/></div>
                    </div>
                </div>
                <div class="right-content">
                    <div class="talk-content">
                        <div class="talk-title"><h4>聊天</h4></div>
                        <div class="talk-detail">
                            <ul></ul>
                        </div>
                        <div class="talk-send">
                            <input type="text" id="talk-keywords" class="talk-keywords"/>
                            <button class="send-btn">发送</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="searchFriend-box dialog_content" id="searchFriend-box">
            <div class="searchFriend-content">
                <div class="close-searchFriend close-dialog"></div>
                <div class="search-box">
                    <span>手机号码</span>
                    <input type="text"/>
                    <button class="search-btn">搜索</button>
                </div>
                <div class="search-result">
                    <div class="no-result">无搜索结果</div>
                    <div class="result-box">
                        <div class="result-user"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="edit-box" id="quit-game">
            <div class="editBox-content">
                <p class="msg-content">您确定要退出游戏吗？</p>
                <button class="edit-game">确定</button>
                <button class="close-editDialog">取消</button>
            </div>
        </div>

        <div class="fieldGuide-box dialog_content" id="fieldGuide-box">
            <div class="fieldGuide-content">
                <img src="../images/fieldGuide-bg.png"/>
                <p class="guide-text" data-index="0">这是指引的第一段文字</p>
            </div>
        </div>
        <!--<div class="recharge-box dialog_content" id="recharge-box">-->
            <!--<div class="recharge-content">-->
                <!--<div class="close-searchFriend close-dialog"></div>-->

            <!--</div>-->
        <!--</div>-->
    </div>
    <div class="progressbar-box">
        <div class="progressbar-content">
            <img src="../images/loading-bg.jpg"/>
            <div id="progressbar1" class="progressbar1"></div>
        </div>
    </div>
</div>
<script src="../plugin/jquery.1.9.1.min.js"></script>
<script src="../plugin/layui/layui.all.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="../plugin/LineProgressbar/js/jquery.lineProgressbar.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.9&key=311194415586a84a3dab215eec8b10bb"></script>
<script src="../js/common.js"></script>
<script src="../js/home.js"></script>
</body>
</html>